<template>
  <div class="map">
    <div id="charts">世界地图</div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import worldData from "./world.json";
import chinaData from "./china.json";
export default {
  data() {
    return {
      itemData: [
        { name: "浙江省", value: [122.6953, 30.8936, 10] },
        { name: "江苏省", value: [117.5977, 34.4531, 0.1] },
        { name: "宁夏", value: [106.9629, 38.9795, 0.2] },
        { name: "天津", value: [117.334, 40.1221, 0.5] },
        { name: "湖北", value: [110.5664, 33.2666, 2.3] },
        { name: "辽宁", value: [123.1348, 42.8027, 1.6] },
        { name: "美国", value: [-93.310319, 36.908779, 0.015] },
        { name: "丹麦", value: [9.1577, 56.1388, 0.275] },
        { name: "瑞士", value: [8.6649, 47.5276, 0.0354] }
      ],
      lineData: [
        {
          val: 32, //数据
          blat: [86.9023, 41.148], //发射点
          elon: [8.6649, 47.5276, 0.0354], //接收点
          bcitysim: "新疆", //发射省的名字
          ecitysim: "瑞士" //接收省的名字
        },
        {
          val: 32,
          blat: [86.9023, 41.148],
          elon: [9.1577, 56.1388, 0.275],
          bcitysim: "新疆",
          ecitysim: "丹麦"
        },
        {
          val: 32,
          blat: [86.9023, 41.148],
          elon: [-93.310319, 36.908779, 0.015],
          bcitysim: "新疆",
          ecitysim: "美国"
        }
      ]
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    getOption() {
      let res = [];
      let province = [];
      for (var i = 0; i < this.lineData.length; i++) {
        province.push(this.lineData[i].bcitysim); //存进去每个省的名字
        province.push(this.lineData[i].ecitysim); //存进去每个省的名字
        res.push({
          fromName: this.lineData[i].bcitysim, //发射的省名，保存用于弹框显示
          toName: this.lineData[i].ecitysim, //接收的省名，保存用于弹框显示
          coords: [
            this.lineData[i].blat, //发射
            this.lineData[i].elon //接收
          ],
          count: this.lineData[i].val //数据
        });
      }
      return {
        // backgroundColor: "#fff",
        title: {
          text: "世界地图",
          left: "left",
          textStyle: {
            fontSize: 16,
            fontWeight: "bold",
            marginLeft: 10
          }
        },
        //地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
        //要显示散点图，必须填写这个配置
        geo: {
          show: true, //是否显示地理坐标系组件
          roam: true, //是否允许鼠标滚动放大，缩小
          map: "world",
          emphasis: {
            //高亮状态下的多边形和标签样式。
            label: {
              //文本
              // color: '#ADA',
              show: true
            },
            itemStyle: {
              //区域
              areaColor: "#ccc"
            }
          },
          center: [100.4, 35.9], //视图中心，展示在中国
          zoom: 3, //起始缩放比例
          itemStyle: {
            normal: {
              areaColor: "rgba(128, 128, 128, 0)", //rgba设置透明度0
              borderColor: "#007bf1", //省份边框颜色
              borderWidth: 1.5 //省份边框
            },
            emphasis: {
              areaColor: "#0f2c70"
            }
          }
          // nameMap: nameMap, //世界各国名中英文对应
        },
        tooltip: {
          show: true,
          formatter: function(params) {
            return `${params.name}  ${params.value[2]}%`;
          }
        },
        //是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
        visualMap: {
          type: "piecewise", // 定义为连续型 visualMap
          min: 0, //最小值
          max: 10, //最大值
          calculable: true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
          textStyle: {
            color: "#fff"
          },
          textStyle: {
            color: "#000"
          }
        },
        series: [
          {
            type: "effectScatter",
            coordinateSystem: "geo", //该系列使用的坐标系
            mapType: "world",
            data: this.itemData,
            label: {
              formatter: params => {
                const { data = {} } = params;
                return `${data.name} \n ${data.value[2]}%`;
              },
              position: "insideLeft", //bottom
              show: true,
              color: "#333"
            },
            //标记的大小,可以设置数组或者函数返回值的形式，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
            symbolSize: 8,
            rippleEffect: {
              //涟漪特效相关配置。
              brushType: "stroke" //波纹的绘制方式
            },
            hoverAnimation: true //鼠标移入放大圆
          },
          {
            //射线效果图层
            type: "lines", //类型：射线
            zlevel: 1, //类似图层效果
            // effect: {
            //   show: true, //是否显示图标
            //   symbol: "arrow", //箭头图标
            //   symbolSize: 5, //图标大小
            //   trailLength: 0.02 //特效尾迹长度[0,1]值越大，尾迹越长重
            // },
            label: {
              show: true
            },
            lineStyle: {
              color: "#fff",
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 1,
                    color: "rgba(159,201,255,1)" // 0% 处的颜色
                  },
                  {
                    offset: 0.3,
                    color: "rgba(102,153,255,1)" // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(159,201,255,1)" // 100% 处的颜色
                  }
                ]),
                width: 4, //尾迹线条宽度
                opacity: 0.5, //尾迹线条透明度
                curveness: 0.1 //尾迹线条曲直度
              }
            },
            //提示框信息
            tooltip: {
              formatter: function(param) {
                return (
                  param.data.fromName +
                  ">" +
                  param.data.toName +
                  "<br>数量：" +
                  param.data.count
                );
              }
            },
            data: res //拿到射线的起始点和结束点
          }
        ]
      };
    },
    initMap() {
      const dom = document.getElementById("charts");
      const mapCharts = echarts.init(dom);
      echarts.registerMap("world", worldData);
      var option = this.getOption();
      mapCharts.setOption(option);
    }
  }
};
</script>

<style>
.map {
  width: 100%;
  height: 100vh;
  /* background: url("~@/assets/img/center_item_bg.png") no-repeat; */
  background-size: 100% 100%;
}
#charts {
  width: 100%;
  height: 100vh;
}
</style>
